<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"/>
    <title>Intro to layers | Sample | ArcGIS API for JavaScript 4.21</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #layerToggle {
            top: 20px;
            right: 20px;
            position: absolute;
            z-index: 99;
            background-color: white;
            border-radius: 8px;
            padding: 10px;
            opacity: 0.75;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/widgets/BasemapToggle","esri/Camera", "esri/tasks/Locator", "esri/Map", "esri/views/SceneView", "esri/layers/TileLayer"],
            (BasemapToggle,Camera, Locator, Map, SceneView, TileLayer) => {
                //使用世界地理编码服务创建一个定位器任务
                const locatorTask = new Locator({
                    url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
                });


                const transportationLayer = new TileLayer({
                    url: "https://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer",
                    id: "streets",//唯一标识层
                    opacity: 0.7,//不同明度
                });

                const housingLayer = new TileLayer({
                    url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
                    id: "ny-housing"
                });


                const map = new Map({
                    basemap: "hybrid",
                    layers: [housingLayer],//图层可以作为组合添加到地图的构造函数中
                });

                map.layers.add(transportationLayer);

                const view = new SceneView({
                    container: "viewDiv",
                    map: map
                });

                const streetsLayerToggle = document.getElementById("streetsLayer");

                //添加监听事件
                streetsLayerToggle.addEventListener("change", () => {
                    transportationLayer.visible = streetsLayerToggle.checked;//设置图层的可见性
                });

                /*当图层创建时*/
                view.on("layerview-create", (event) => {
                    if (event.layer.id === "ny-housing") {
                        console.log("为纽约住房密度创建的图层", event.layerView);
                    }
                    if (event.layer.id === "streets") {
                        console.log("创建街道的图层图！", event.layerView);
                    }
                });

                let camera = new Camera({
                    fov: 55,//较小的 fov 角模拟远摄镜头放大，而较大的 fov 角模拟鱼眼镜头缩小。默认角度为 55 度
                    heading: 0,//当北方位于屏幕顶部时，航向为零, 当值为180的时候,南方在屏幕顶部,值在0-360之间
                    position: [100.3, 33.9, 2000000],//相机的位置,经度 纬度 海拔高度
                    tilt: 45,//垂直向下看表面时倾斜度为零，当相机平行于表面看时倾斜度为 90 度,平行于地面角度为180
                });

                view.when(() => {
                    view.goTo(housingLayer.fullExtent);//housingLayer.fullExtent:地图服务定义的层的完整范围
                    //view.goTo(camera);
                });

                view.popup.autoCloseEnabled = true;//设置当视图摄像机或视点更改时，true为自动关闭弹出窗口,false为不关闭窗口

                //右键点击,打开弹框
                view.on("click", (event) => {
                    //获取地图点的经纬度坐标
                    let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                    let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

                    view.popup.open({//在给定位置打开弹出窗口
                        title: "点击的位置为[" + lat + "," + lon + "]",
                        content: "点击的位置为[" + lat + "," + lon + "],您肯定没去过",
                        location: event.mapPoint,
                    });

                    locatorTask.locationToAddress({//将地点转为地址放在content中,上面设置的content将失效
                        location: event.mapPoint
                    }).then((response) => {
                        // 如果成功找到地址，则将其显示在弹出窗口的内容中
                        view.popup.content = response.address;
                    }).catch(() => {
                        //如果承诺失败且未找到结果，则显示通用消息
                        view.popup.content = "找不到此位置的地址";
                    })
                });


                //添加小部件
                let toggle = new BasemapToggle({
                    view:view,
                    nextBasemap:"streets-vector"
                });

                view.ui.add(toggle,"bottom-left");
            });
    </script>


</head>
<body>
<div id="viewDiv"></div>
<span class="esri-widget" id="layerToggle"> <input checked id="streetsLayer" type="checkbox"/> Transportation </span>
</body>
</html>
